import { MenuFoldOutlined, MenuUnfoldOutlined, SearchOutlined,UserOutlined,SettingOutlined,ExportOutlined} from '@ant-design/icons';
import { Layout, Menu, Dropdown, Space,  } from 'antd';
import React, { useState, useEffect } from 'react';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import Logo from '../assets/images/logo.png'
import menusApi from '../apis/menus'
const { Header, Sider, Content } = Layout;
export default function layout() {
  const [menus, setMenus] = useState([])
  const [collapsed, setCollapsed] = useState(false);
  const username = JSON.parse(localStorage.user).username
  const imgUrl = JSON.parse(localStorage.user).avatar
  const loaction = useLocation()
  const navigate = useNavigate()
  function changeNav(params) {
    navigate(params.key)
    const checkMenu = params.keyPath[1]
    if (checkMenu) {
      localStorage.checkMenu = checkMenu
    } else {
      localStorage.removeItem('checkMenu')
    }
  }
  function getMenus() {
    menusApi.getAllSiders(username).then(res => {
      // console.log(res);
      setMenus(formatMenus(res.data[0].children))
    })
    function formatMenus(menus) {
      let level = 0
      return handleMenus(menus)
      function handleMenus(menus) {
        return menus.map((item, index) => {
          const o = {
            title: item.name,
            label: item.name,
            key: item.path
          }
          if (item.children) {
            level++
            o.children = handleMenus(item.children)
            o.key = `${o.key}-${index}`
            level = 0
          }
          if (item.icon) {
            o.icon = <i style={{ display: 'inline-block' }} className={'iconfont iconfont-' + item.icon}></i>
          }
          return o
        })
      }
    }
  }
  useEffect(() => {
    getMenus()
  }, [])
  function user(e){
    console.log(e);
    if(e.key==='4'){
      localStorage.clear()
      navigate('/login')
    }
    if(e.key==='1'){
      navigate('/profile')
    }
  }
  const items = [
        {
          key: '1',
          label: '个人中心',
          icon: <UserOutlined />,
        },
        {
          key: '2',
          label: '密码修改',
          icon: <SearchOutlined />,
        },
        {
          key: '3',
          label: '系统定制',
          icon: <SettingOutlined />,
        },
        {
          key: '4',
          label: '退出登录',
          icon: <ExportOutlined />,
        },
      ];
  const menuProps = {
    items,
    onClick: user,
  };
  return (
    <Layout>
      <Sider trigger={null} collapsible collapsed={collapsed} style={{height:'100vh'}}>
        <div style={{ height: 60, display: 'flex', alignItems: 'center', paddingLeft: 24 ,position:'fixed'}} >
          <img src={Logo} style={{ backgroundColor: '#001529', marginRight: 20 }} />
          <h1 style={{ color: '#f0f2f5', margin: 0, fontSize: 20 }}>赤兔养车</h1>
        </div>
        <Menu
          theme="dark"
          mode="inline"
          onClick={changeNav}
          selectedKeys={[loaction.pathname]}
          defaultOpenKeys={[localStorage.checkMenu]}
          items={menus}
          style={{height:'100%',position:'fixed',maxWidth:'200px',marginTop:50}}
        />
      </Sider>
      <Layout className="site-layout">
        <Header
          className="site-layout-background boxShadow"
          style={{
            width: '100%',
            paddingRight: 230,
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            position: 'fixed',
            zIndex: '99',
          }}
        >
          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            className: 'trigger',
            onClick: () => setCollapsed(!collapsed),
          })}
          <Dropdown menu={menuProps}>
            <a onClick={(e) => e.preventDefault()}>
              <Space>
                <div>
                  <img src={"http://xawn.f3322.net:8002/distremote/static/avatar/" + imgUrl} style={{ width: 30, height: 30, borderRadius: 50, cursor: 'pointer' }} />
                  <span style={{ fontWeight: 600, marginLeft: 10 ,color:'#000'}}>{username}</span>
                </div>
              </Space>
            </a>
          </Dropdown>
        </Header>
        <Content
          className="site-layout-background overY"
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            marginTop: 100,
            overflowX:'hidden'
          }}
        >
          <Outlet></Outlet>
        </Content>
      </Layout>
    </Layout>
  )
}
